<!DOCTYPE html>
<html>
<head>
    <title>鹿鹿泽待续课会员列表</title>
    <link rel="stylesheet" href="../static/css/minghu.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
</head>
<body style="background-color: rgb(254, 254, 255);">
    {% include 'show_ins_info.html' %}
    <hr>
    <h2 id="title" style="margin-bottom: 20px;">鹿鹿泽待续课会员列表</h2>    
    <div><button id="switchAllBtn" onclick="showAfterDueCus();">显示所有记录</button></div>
    <hr style="border-top:1px dashed;margin-bottom: 30px;margin-top: 20px;">

    <div>
        <div id="titlePrompt"></div>
        <div id="dueList"></div>
    </div>


    <script src="../static/js/common.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    
    <script>
        let insName;
        let insId;
        let insRole;
        let insList;
        let dueDataPage;
        let showAll='no';
        
        document.addEventListener('DOMContentLoaded',function(){
            // loginCheck();        
            const insInfo=hideInsSelectBlockAndGetInsInfo();
            insId=insInfo.sessionInsId;
            insName=insInfo.sessionInsName;
            insRole=insInfo.sessionInsRole;
            // console.log(insName)
            //教练角色不允许进入该页面，返回Index
            if(insRole==='ins'){
                window.location.replace('./index');
            }

       
            fetch('/get_ins_list', {
                method: 'GET',
            })
            .then(response => response.json())
            .then(data => {
            //将data赋值给块变量cus_list，供后面的handleInput使用
                console.log('ins list:',data);
                insList=data['ins_list'];
            })
            .catch(error => console.error('Error:', error));     
            showAfterDueCus();         

        });

        function showAfterDueCus(){
            if(showAll==='no'){
                showAll='yes';
            }else{
                showAll='no';
            }
            const dueList=document.getElementById('dueList');
            dueList.innerHTML='';
            let insIdPage;
            if(insRole==='ins'){
                insIdPage=insId;
            }else{
                //特殊，陆的情况
                if(insRole==='admin'){
                    if(insId==='LZADM002' || insId==='LZADM001'){
                        insIdPage='LZINS001';
                    }
                    
                }
            }

            if(!dueDataPage){
                fetch('/get_after_duedate_data')
                .then(response=>response.json())
                .then(data=>{
                    // console.log('due data:',data['data']);  
                    if(data['res']==='ok'){   
                        dueDataPage=data['data']['due_data'];                 
                        showInsAfterDueList(data['data']['due_data']);                        
                    }else{
                        dueList.innerHTML='';
                    }
                })
                .catch(error=>console.log(error));
            }else{
                showInsAfterDueList(dueDataPage);    
            }
            
            
        }        

        function showInsAfterDueList(data){  
            // console.log('due data:',data);
            const switchBtn=document.getElementById('switchAllBtn');
            const titlePrompt=document.getElementById('titlePrompt');
            const dueList=document.getElementById('dueList');
            dueList.innerHTML='';
            let insListPage=[];
            //生成教练列表
            data.forEach(item=>{
                        if(!insListPage.includes(item['ins_names'])){
                            insListPage.push(item['ins_names']);
                        }
                    });

            let cusStr='';

            insListPage.forEach(insName=>{
                const insBox=document.createElement('div');
                insBox.id=insName;
                insBox.style.marginBottom='30px';

                const titleBox=document.createElement('div');
                titleBox.style.display='flex';
                titleBox.style.flexDirection='row';
                titleBox.style.justifyContent='start';
                titleBox.style.alignItems='flex-end';
                titleBox.style.margin='8px';

                const insTitle=document.createElement('div');
                insTitle.style.display='flex';
                insTitle.style.flexDirection='row';
                insTitle.style.justifyContent='start';
                insTitle.style.alignItems='flex-end';
                insTitle.id=insName+'Title';
                insTitle.innerHTML=`<span style="background-color:#b3863e;color:#ffffff;padding:5px;border-radius:4px;width:80px;text-align:center;">${insName}</span><span style="color:#b3863e;font-size:14px;"> &nbsp;&nbsp;教练</span>`;
                titleBox.appendChild(insTitle);

                const countDiv=document.createElement('div');
                countDiv.style.marginLeft='8px';
                let insDueCusStr='';
                let count=0;
                data.forEach(item=>{  
                    if(item['ins_names'].includes(insName)){
                        if(showAll==='yes'){
                            titlePrompt.style.marginBottom='40px';
                            titlePrompt.innerHTML=`<span style="color:#844ead;font-size:20px;text-align:center;font-weight:bold;">所有待续课会员记录</span>`;
                            if(item['cls_type']==='常规课程'){
                                insDueCusStr+=`<p><span style="color:#9d66ba;">${count+1}. ${item['cus_name']}（常规课程，-${item['days_diff']}天，到期日 ${dateToString(item['latest_end_date'],'date')}）</span></p>`;
                            }else{
                                insDueCusStr+=`<p><span style="color:#9d66ba;">${count+1}. ${item['cus_name']}（限时课程，-${item['days_diff']}天，到期日 ${dateToString(item['latest_end_date'],'date')}）</span></p>`;
                            }            
                            switchBtn.textContent='显示60天以内的记录';                        
                            count+=1;
                        }else{
                            titlePrompt.style.marginBottom='40px';
                            titlePrompt.innerHTML=`<span style="color:#844ead;font-size:20px;text-align:center;font-weight:bold;">60天以内待续课会员记录</span>`;
                            if(item['days_diff']>=0 && item['days_diff']<=60){
                                if(item['cls_type']==='常规课程'){
                                    insDueCusStr+=`<p><span style="color:#9d66ba;">${count+1}. ${item['cus_name']}（常规课程，-${item['days_diff']}天，到期日 ${dateToString(item['latest_end_date'],'date')}）</span></p>`;
                                }else{
                                    insDueCusStr+=`<p><span style="color:#9d66ba;">${count+1}. ${item['cus_name']}（限时课程，-${item['days_diff']}天，到期日 ${dateToString(item['latest_end_date'],'date')}）</span></p>`;
                                }            
                                switchBtn.textContent='显示所有的记录';                        
                                count+=1;
                            }
                        }
                    }
                    
                }); 
                countDiv.innerHTML=`<span style="color:#f0a422;font-size:18px;font-weight:bold;">${count}位会员</span>`;
                titleBox.appendChild(countDiv);

                insBox.appendChild(titleBox);
            
                const divStr=document.createElement('div');
                divStr.id=insName+'Str';
                divStr.style.fontSize='14px';
                divStr.style.marginLeft='8px';
                divStr.style.lineHeight='2em';
                divStr.innerHTML=`${insDueCusStr}`;
                insBox.appendChild(divStr);
                dueList.appendChild(insBox);
            });
        }
                     
 


    </script>
  
</body>
</html>
